<template>
  <HeadContainer class="system-notify bg-background" :title="$t('title.fantasiSystemNotify')" show-more @more="onMore">
    <TopTabs v-model="tab" :items="tabs"></TopTabs>
    <ErrorNodata v-if="!loading && dataList.length === 0"></ErrorNodata>
    <div class="container mt-4" @scroll="onScroll">
      <Column
        v-for="(data, i) in dataList"
        :divider="i !== 0"
        :system="data.type === NOTIFY_TYPE.COMMENT"
        :key="data.id"
        :avatar-url="data.author?.avatar"
        :nickname="data.type === NOTIFY_TYPE.COMMENT ? $t('message.commentNotify') : $t('message.replyNotify')"
        :content="
          data.type === NOTIFY_TYPE.COMMENT
            ? $t('content.commentNotifyMsg', { content: data.content })
            : data.type === NOTIFY_TYPE.REPLY
            ? $t('content.replyNotifyMsg', { user: `@${data.author?.nickname}`, content: data.comment })
            : '...'
        "
        :unread-count="data.nums"
        :timestamp="toDate(data.created_at)"
        :vip="data.author?.is_vip"
        @click="$emit('click:notify', data)"
      ></Column>
      <div class="font-size-14 font-weight-400 line-height-140 text-center mt-2">
        {{ loading ? $t('common.loading') : noMore && dataList.length !== 0 ? $t('common.noMore') : '' }}
      </div>
    </div>
  </HeadContainer>
</template>

<script setup>
import { debounce } from 'lodash-es'
import { computed, defineAsyncComponent, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { useSystemNotifyStore } from '@/store/system-notify'
import { $t } from '@/i18n'
import { toDate } from '@/utils/string-helper'
import ErrorNodata from '@/components/common/ErrorNodata.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import TopTabs from '@/components/tabs/TopTabs.vue'
import { POPUP_DIALOG_TYPE } from '@/constant'
import { COMMENT_NOTIFY, NOTIFY_TYPE, REPLY_NOTIFY } from '@/constant/chat'
import API from '@/http'

const Column = defineAsyncComponent(() => import('./Column.vue'))

defineEmits(['click:notify'])

const tab = ref(NOTIFY_TYPE.ALL)
const tabs = ref([
  { label: 'common.all', value: NOTIFY_TYPE.ALL },
  { label: 'message.commentNotify', value: NOTIFY_TYPE.COMMENT },
  { label: 'message.replyNotify', value: NOTIFY_TYPE.REPLY },
])

const systemNotifyStore = useSystemNotifyStore()
const {
  allList,
  allLoading,
  allNoMore,
  // allErrorMsg,

  commentList,
  commentLoading,
  commentNoMore,
  // commentErrorMsg,

  replyList,
  replyLoading,
  replyNoMore,
  // replyErrorMsg,
} = storeToRefs(systemNotifyStore)
const { allNextPage, commentNextPage, replyNextPage } = systemNotifyStore

const dataList = computed(() => {
  switch (tab.value) {
    case NOTIFY_TYPE.ALL:
      return allList.value
    case NOTIFY_TYPE.COMMENT:
      return commentList.value
    case NOTIFY_TYPE.REPLY:
      return replyList.value
  }
  return []
})
const loading = computed(() => {
  switch (tab.value) {
    case NOTIFY_TYPE.ALL:
      return allLoading.value
    case NOTIFY_TYPE.COMMENT:
      return commentLoading.value
    case NOTIFY_TYPE.REPLY:
      return replyLoading.value
  }
  return false
})
const noMore = computed(() => {
  switch (tab.value) {
    case NOTIFY_TYPE.ALL:
      return allNoMore.value
    case NOTIFY_TYPE.COMMENT:
      return commentNoMore.value
    case NOTIFY_TYPE.REPLY:
      return replyNoMore.value
  }
  return false
})
function nextPage() {
  switch (tab.value) {
    case NOTIFY_TYPE.ALL:
      allNextPage()
      break
    case NOTIFY_TYPE.COMMENT:
      commentNextPage()
      break
    case NOTIFY_TYPE.REPLY:
      replyNextPage()
      break
  }
}

const { $popupDialog } = usePopupDialogStore()
function onMore() {
  $popupDialog(POPUP_DIALOG_TYPE.MESSAGE_NOTIFY_SETTING, {
    title: $t('title.notifySetting'),
    confirm: ({ commentNotify, replyNotify }) => {
      const comment = commentNotify ? COMMENT_NOTIFY.ON : COMMENT_NOTIFY.OFF
      const reply = replyNotify ? REPLY_NOTIFY.ON : REPLY_NOTIFY.OFF
      const notice = `${comment},${reply}`
      API.Chat.setNotify({ data: { notice } }).catch((e) => console.warn('通知設定出錯囉...', e))
    },
    cancel: () => {},
  }).open()
}

const onScroll = debounce(({ target: { scrollTop, clientHeight, scrollHeight } }) => {
  // 觸底繼續加載
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    nextPage()
  }
}, 200)
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  overflow-x: hidden;
}
</style>
